<template>
  <van-tabbar v-model="active">
    <router-link to="/home" class="itembox">
      <van-tabbar-item icon="wap-home-o">
        首页
      </van-tabbar-item>
    </router-link>
    <router-link to="/menu" class="itembox">
      <van-tabbar-item icon="search">
        菜谱
      </van-tabbar-item>
    </router-link>
    <router-link to="/market" class="itembox">
      <van-tabbar-item icon="bag-o">
        市集
      </van-tabbar-item>
    </router-link>
    <router-link to="/personal" class="itembox">
      <van-tabbar-item icon="user-o">
        我的
      </van-tabbar-item>
    </router-link>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style scoped lang="less">
.itembox {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #646566;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.van-tabbar-item--active {
  color: #f2d229;
  a {
    color: #f2d229;
  }
}
</style>